<%@ page language="java" pageEncoding="UTF-8" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <!DOCTYPE html>
        <html>

        <head>
            <base href="${context}/" />
            <title>后台管理</title>
            <meta charset="utf-8" />
            <base href="${pageContext.request.contextPath}/">
            <link rel="stylesheet" href="css/admin.css" />
            <script src="/js/jquery-3.6.0.js"></script>
            <script src="/layer/layer.js"></script>
            <script>
                $(function () {
                    // 全选按钮
                    $("#checkAll").click(function () {
                        $(":checkbox").prop("checked", $(this).prop("checked"))
                    })
                    // //
                    // $(".checkbox").click(function () {
                    //     let num=0;
                    //     for (const c of $(".checkbox")) {
                    //         if (!$(c).prop("checked")) {
                    //             $("#checkAll").prop("checked", false)
                    //         }
                    //         if ($(c).prop("checked")) {
                    //             num++;
                    //             if(num== $(".checkbox").length){
                    //                 $("#checkAll").prop("checked", true)
                    //             }else{
                    //                 $("#checkAll").prop("checked", false)
                    //             }
                    //         }
                    //     }

                    // })


                    //
                    $(".checkbox").click(function () {
                        console.log($(".checkbox:checked").length)
                        if ($(".checkbox:checked").length == $(".checkbox").length) {
                            $("#checkAll").prop("indeterminate", false)
                            $("#checkAll").prop("checked", true)
                        } else if ($(".checkbox:checked").length == 0) {
                            $("#checkAll").prop("checked", false)
                        } else {
                            $("#checkAll").prop("indeterminate", true)
                        }
                    })
                })


            </script>
        </head>

        <body>
            <div class="container">
                <div id="header">
                    <jsp:include page="header.jsp"></jsp:include>
                </div>
                <div id="admin_left">
                    <ul class="submenu">
                        <jsp:include page="left.jsp"></jsp:include>
                    </ul>
                    <div id="copyright"></div>
                </div>

                <div id="admin_right">
                    <div style="height: 640px;">
                        <div class="headbar">
                            <div class="searchbar">
                                <form action="admin/goods" method="get" id="searchFrom">
                                    <input type="hidden" name="opr" value="select" />
                                    <input type="hidden" name="p" id="p" value="1" />
                                    <input type="hidden" name="pSize" id="pSize" value="5" />
                                    <select class="auto" name="categoryId" id="category1">
                                        <option value="0">选择分类</option>
                                        <c:forEach items="${categories}" var="category">
                                            <option value="${category.id}">${category.categoryName}</option>
                                        </c:forEach>
                                    </select>
                                    商品名： <input class="small" name="name" id="name" type="text"
                                        value="${goods.bookName}">
                                    销售价：<input class="small" name="minPrice" id="name" type="text"
                                        value="${goods.minPrice}">
                                    至：<input class="small" name="maxPrice" id="name" type="text"
                                        value="${goods.maxPrice}">
                                    <button class="btn" type="submit">
                                        <span class="sel">筛 选</span>
                                    </button>
                                </form>
                            </div>

                            <div class="field">
                                <table class="list_table" align="center">
                                    <col width="40px" />
                                    <col width="200px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="70px" />
                                    <thead>
                                        <tr>
                                            <th><input type="checkbox" name="" id="checkAll"> 选择</th>
                                            <th>商品名称</th>
                                            <th>缩略图</th>
                                            <th>分类</th>
                                            <th>销售价</th>
                                            <th>库存</th>
                                            <th>销量</th>
                                            <th>是否最新</th>
                                            <th>是否热卖</th>
                                            <th>是否售卖中</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <form action="" method="post" name="orderForm" align="center">
                            <div class="content">
                                <table class="list_table">
                                    <col width="40px" />
                                    <col width="200px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="50px" />
                                    <col width="70px" />
                                    <tbody>
                                        <c:forEach items="${pageBean.data}" var="goods">
                                            <c:if test="${goods.state==1}">
                                                <tr onMouseOver="this.style.backgroundColor='#E0FFFF'"
                                                    onMouseOut="this.style.backgroundColor='#FFFFFF'">
                                            </c:if>
                                            <c:if test="${goods.state==-1}">

                                                <tr style="opacity: 0.5;"
                                                    onMouseOver="this.style.backgroundColor='#FFDAB9'"
                                                    onMouseOut="this.style.backgroundColor='#FFFFFF'">
                                            </c:if>
                                            <td><input name="" type="checkbox" value="1" class="checkbox" /></td>
                                            <td><a href="admin/goods?opr=updateSelect&id=${goods.id}" target="_blank">
                                                    <c:if test="${goods.state==-1}">
                                                        <del>
                                                    </c:if>
                                                    ${goods.bookName}</del>
                                                </a></td>
                                            <td><img src="${goods.img}" alt="${goods.bookName}"
                                                    title="${goods.bookName}"
                                                    style="height: 48px;width: 48px; padding: 2px;display: block; border-radius: 5px;">
                                            </td>
                                            <td>${goods.category.categoryName}</td>
                                            <td>${goods.sellingPrice}</td>
                                            <td>${goods.stock}</td>
                                            <td>${goods.salesNum}</td>
                                            <td style="color: rgb(207, 55, 21);font-weight: 600;">
                                                <c:if test="${goods.isNew==1}">✔</c:if>
                                            </td>

                                            <td style="color: rgb(207, 55, 21);font-weight: 600;">
                                                <c:if test="${goods.isHot==1}">✔</c:if>
                                            </td>
                                            <td style="color: rgb(207, 55, 21);font-weight: 600;">
                                                <c:if test="${goods.state==1}">✔</c:if>
                                            </td>
                                            <td><a href="admin/goods?opr=updateSelect&id=${goods.id}"><img
                                                        class="operator" src="images/admin/bj.png" alt="编辑" title="编辑"
                                                        onmouseover="this.style.width='18px',this.style.height='18px'"
                                                        onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                                <a href="javascript:void(0)"><img class="operator"
                                                        src="images/admin/sc.png" alt="删除" id="delID" title="删除"
                                                        data-gid="${goods.id}"
                                                        onmouseover="this.style.width='18px',this.style.height='18px'"
                                                        onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
                                            </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                        <form>
                            <select class="auto" name="pageSize" id="categorys"
                                style="float: right;margin-right: 50px; margin-top: 10px"
                                onchange="goPageSize(this.value)">
                                <c:forEach begin="5" end="30" var="pSize" step="5">
                                    <option value="${pSize}">${pSize}</option>
                                </c:forEach>

                            </select>
                            <span
                                style="float: right;margin-right: 10px;padding-top: 5px;margin-top: 10px;color: rgb(148, 152, 152);">
                                页面数据:${pageBean.currPageSize} 条</span>
                        </form>

                        <div class='pages_bar'>
                            <a href='javascript:goPage(1)' id="first">首页</a>
                            <a href="javascript:if(${pageBean.currPage==1}){goPage(1)}else{goPage(${pageBean.currPage-1})}"
                                id="prev">上一页</a>
                            <c:forEach begin="1" end="${pageBean.totalPages}" var="p">
                                <a href="javascript:goPage(${p})">${p}</a>
                            </c:forEach>
                            <a href="javascript:if (${ pageBean.currPage == pageBean.totalPages }) {goPage(${ pageBean.totalPages}) }else { goPage(${ pageBean.currPage + 1 })}"
                                id="next">下一页</a>
                            <a href='javascript:goPage(${pageBean.totalPages})' id="last">尾页</a>
                            <select onchange="goPage(this.value)" id="pselect">
                                <c:forEach begin="1" end="${pageBean.totalPages}" var="p">
                                    <option value="${p}">${p}</option>
                                </c:forEach>
                            </select>
                            <span>当前第${pageBean.currPage}页/共${pageBean.totalPages}页</span>
                        </div>
                    </div>
                    <div id="separator"></div>
                </div>
        </body>
        <script>
            window.addEventListener("load", function () {
                document.getElementById("admin_right").addEventListener("click", function (e) {
                    if (e.target.id === "delID") {
                        layer.confirm('您确定删除吗？', {
                            btn: ['确定', '取消'] //按钮
                        }, function () {
                            location.href = "admin/goods?opr=del&gid=" + e.target.getAttribute("data-gid");
                        }, function () {
                            layer.closeAll('dialog');
                        });

                    }
                })
                if (${ goods.category.id == null }) {
                document.getElementById("category1").value = "0";
            } else {
                document.getElementById("category1").value = "${goods.category.id}";
            }
            // 页码下拉框初始化
            document.getElementById("pselect").value = "${pageBean.currPage}";
            // 页面数据量大小
            document.getElementById("categorys").value = "${pageBean.pageSize}";
    });

            function goPage(p) {
                document.getElementById("p").value = p;
                document.getElementById("searchFrom").submit();
            }

            function goPageSize(psize) {
                // javascript:location.href='admin/goods?opr=select&pSize='+this.value;
                document.getElementById("pSize").value = psize;
                document.getElementById("searchFrom").submit();
            }
        </script>

        </html>